﻿import React, {Component} from 'react';
import {Card, Col, DatePicker, Input, Row, Select,Button} from "antd";
import locale from "antd/lib/date-picker/locale/zh_CN";
const { Option,  } = Select;
const { RangePicker } = DatePicker;

const titleStyle={height:'60px',lineHeight:'30px',fontSize:'20px',color: 'rgb(24,144,255)'}

class NewPingtuan extends Component {
    constructor(props) {
        super(props);
        this.state={
            hongdongSP:props.huodongData,
            xzSpData:'',
            bulk_activity_start_time:'',
            bulk_activity_end_time:'',
            bulk_activity_use_time:'',
            bulk_number:'',
            bulk_price:'',
            bulk_state_id:'',
            bulk_information_id:'',
            goods_promotion:'',
            goods_id:''
        }
    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            hongdongSP: nextProps.huodongData,
        });
    }

    hdsp=(val)=>{
        if (val){
            return val.map(item=>{
                return <Option key={item.goods_id} value={item.goods_id}>{item.goods_name}</Option>
            })
        }

    }
    spXuanzhe=(val)=>{
        console.log(val)
        this.state.hongdongSP.map(item=>{
            if (item.goods_id==val){
                // console.log(item)
                this.setState({
                    xzSpData:item,
                    goods_id:item.goods_id
                })
            }
        })
    }


    huodongTime=(value,dateString)=>{
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString[0]);
        console.log('Formatted Selected Time: ', dateString[1]);
        this.setState({
            bulk_activity_start_time:dateString[0],
            bulk_activity_end_time:dateString[1]
        })
    }
    youxiaoTime=(e)=>{
        console.log(e.target.value)
        this.setState({
            bulk_activity_use_time:e.target.value
        })
    }
    chentuanPeople=(e)=>{
        console.log(e.target.value)
        this.setState({
            bulk_number:e.target.value
        })
    }
    chuxiaoJia=(e)=>{
        console.log(e.target.value)
        this.setState({
            goods_promotion:e.target.value
        })
    }
    pintuanJia=(e)=>{
        console.log(e.target.value)
        this.setState({
            bulk_price:e.target.value
        })
    }
    render() {
        console.log(this.state.hongdongSP)
        // console.log(this.state.xzSpData)
        return (
            <Card headStyle={titleStyle}>
                <Row align="middle" gutter={[8,8]}>
                    <Col span={5} >拼团活动时间：</Col>
                    <Col span={12} >
                        <RangePicker locale={locale}  showTime bordered onChange={this.huodongTime}/>
                    </Col>
                </Row>
                <Row align="middle" gutter={[8,8]}>
                    <Col span={5} >成团活动时间：</Col>
                    <Col span={6} >
                        <Input placeholder="成团有效时间" onChange={this.youxiaoTime}/>
                    </Col>
                    <Col span={5}>小时</Col>
                </Row>
                <Row align="middle" gutter={[8,8]}>
                    <Col span={5} >成团人数：</Col>
                    <Col span={6} >
                        <Input placeholder="" onChange={this.chentuanPeople}/>
                    </Col>
                    <Col span={1}>人</Col>
                    <Col span={4}>（至少两人）</Col>
                </Row>
                <Row align="middle" gutter={[8,8]}>
                    <Col span={5} >商品名称：</Col>
                    <Col span={6} >
                        <Select style={{width:'100%'}} defaultValue="" onChange={this.spXuanzhe}>
                            <Option value=''/>
                            {this.hdsp(this.state.hongdongSP)}
                        </Select>
                    </Col>
                </Row>
                <Row align="middle" gutter={[8,8]}>
                    <Col span={5} >商品ID：</Col>
                    <Col span={6} ><Input style={{width:'100%'}} disabled={true} value={this.state.xzSpData.goods_id}/></Col>
                </Row>
                <Row align="middle" gutter={[8,8]}>
                    <Col span={5} >原价：</Col>
                    <Col span={6} ><Input style={{width:'100%'}} disabled={true} value={this.state.xzSpData.goods_original_price} /></Col>
                </Row>
                {/*<Row align="middle" gutter={[8,8]}>
                    <Col span={5} >促销价：</Col>
                    <Col span={6} ><Input style={{width:'100%'}} onChange={this.chuxiaoJia}/></Col>
                </Row>*/}
                <Row align="middle" gutter={[8,8]}>
                    <Col span={5} >拼团价：</Col>
                    <Col span={6} >
                        <Input style={{width:'100%'}} onChange={this.pintuanJia} />
                    </Col>
                </Row>
                <Row align="middle" gutter={[8,8]}>
                    <Col span={18}/>
                    <Col span={3} ><Button type="primary" onClick={this.props.addHuodong.bind(this,this.state)}>添加</Button></Col>
                    <Col span={3} ><Button type="primary" onClick={this.props.onClose.bind(this)}>取消</Button></Col>
                </Row>
            </Card>
        );
    }
}

export default NewPingtuan;